<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>七海后台管理系统</title>
  <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  <link rel="stylesheet" href="/static/plugins/lightbox/css/lightbox.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    a{
      text-decoration: none;
    }
    .gray {
      color: #ccc;
    }

    .green {
      color: green;
    }

    .red {
      color: red;
    }

    .photo {
      width: 300px;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .photo img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <!-- 引入公共页面 -->
    {{include "./common/header.html" }}

    <!-- 引入公共页面 -->
    {{include "./common/side-menu.html" }}

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">


        <span class="layui-breadcrumb" lay-separator="/">
          <a href="/">首页</a>
          <a href="/article">文章列表</a>
        </span>
        <div style="padding:15px;">
          <div class="layui-input-inline" style="display: flex;">
          <input type="text" style="width: 200px;" class="layui-input" id="title" placeholder="请输入文章标题的关键字">
          <select name="" id="status"class="form-control"style="display:inline-block;width: 90px;">
            <option value="">全部状态</option>
            <option value="0">待审核</option>
            <option value="1">审核通过</option>
            <option value="2">审核失败</option>
          </select>
          <button class="layui-btn" id="search">搜索</button>
        </div>
        </div>
        <div>
          <table align="center" width="1300px" border="1px" rules="all" class="layui-table" >
            <thead>
              <tr>
                <td>序号</td>
                <td width="200px">标题</td>
                <td>所属分类</td>
                <td>图片</td>
                <td>作者</td>
                <td>内容</td>
                <td>状态</td>
                <td>添加时间</td>
                <td>操作</td>

              </tr>
            </thead>

            <tbody>

            </tbody>


          </table>
          <!-- 分页容器 -->
          <div id="page"></div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://momentjs.bootcss.com/downloads/moment.min.js"></script>
  <script src="/static/js/jquery.js"></script>
  <script src="/static/plugins/layui/layui.js"></script>
  <script src="/static/plugins/lightbox/js/lightbox-plus-jquery.min.js"></script>
  <script>
    let curr = 1;
    let limit = 5;
    let laypage;
    let title;
    let status;
    let isSearch = false;
    let statusTextMap = {
      0: '<span class="layui-bg-orange">待审核</span>',
      1: '<span class="layui-bg-green">审核通过</span>',
      2: '<span class="layui-bg-black">审核失败</span>'
    }

    function getArticleData(curr, limit, callback,where={}) {
      let params = Object.assign({curr,limit},where)
      $.get('/articleCount',params,function (res) {
        callback && callback(res)
      }, 'json');
    }

    function renderTable(data) {
      let tbodyHtml = '';
      data.forEach((item, index) => {
        index = index + 1;
        let {
          id,
          title,
          cate_name,
          img,
          author,
          status,
          add_time,
          update_time
        } = item;
        add_time = moment.unix(add_time).format("YYYY-MM-DD")
        update_time = moment.unix(update_time).format("YYYY-MM-DD")
        let copyItem = JSON.stringify(item);
        tbodyHtml += `<tr>
              <td>${index}</td>
              <td>${title}</td>
              <td>${cate_name}</td>
              <td>
                <a href="/${img}" data-lightbox="preview" data-title="$title">
                <img src="${img}" width="50px" height="50px" style="border-radius:50%" alt="">
                  </a>
              </td>
              <td>${author}</td>
              <td>
                <a href="/detail?id=${id}">查看详情</a>
                <button class="layui-btn layui-btn-sm showContent" data-item='${copyItem}'>查看全文</button>
              </td>
              <td> ${statusTextMap[status]}</td>
              <td>${add_time}</td>
              <td>
                <a href="/edit?id=${id}" class="layui-btn  layui-btn-sm">编辑</a>
                <a href="javascript:;" onclick="confirmDelete('${id}','${img}');"
                  class="layui-btn  layui-btn-sm layui-btn-danger">永久删除</a>
                <a href="/recycle?id=${id}" onclick="return confirm('确实加入回收站');"
                  class="layui-btn  layui-btn-sm">加入回收站</a>
                <a href="javascript:void(0)" onclick="ajaxDelete(this,'${id}','${img}'')"
                  class="layui-btn  layui-btn-sm">ajax永久删除</a>
                <a href="/editContent?id=${id}" class="layui-btn  layui-btn-sm">设置内容</a>
              </td>
            </tr>
        `;
      })
      return tbodyHtml;
    }

    function renderPage(laypage, ele, count, limit) {
      laypage.render({
        elem: ele,
        count,
        limit,
        jump: function (obj, first) {
          let { curr, limit } = obj;
          if(isSearch){return;}
          getArticleData(curr, limit, res => {
            let tbody = renderTable(res.data)
            $("tbody").html(tbody);
          },{title,status})

        }
      });
    }

    layui.use('laypage', function () {
     laypage = layui.laypage;
      getArticleData(curr, limit, res => {
        let { count, data } = res;
        renderPage(laypage, 'page', count, limit)
      })

    });


    // 普通删除
    function confirmDelete(id, img) {
      layer.confirm('确认永久删除吗，数据不可还原', {
        btn: ['是的', '取消'], //按钮
        shadeClose: true,
        shade: [0.3, '#000']
      }, () => {
        //点了是的按钮触发
        location.href = "/delete?id=" + id + "&img=" + img
      }, () => {
        layer.msg('你取消')
      });

    }

    // ajax异步删除
    function ajaxDelete(ele, id, img) {
      layer.confirm('确认删除吗', {
        btn: ['是的', '取消'], //按钮
        shadeClose: true,
        shade: [0.3, '#000']
      }, () => {
        //点了是的按钮触发
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (this.readyState === 4 && this.status === 200) {
            let data = JSON.parse(this.responseText);
            let {
              code,
              message
            } = data;
            if (code === 20000) {
              $(ele).parents('tr').remove()
              setTimeout(function () {
                layer.msg('删除成功', {
                  icon: 1
                })
              }, 500)

              layer.closeAll();
            } else if (code === 30004) {
              layer.msg(message)
              location.href = "/login"
            } else {
              layer.msg('删除失败')
            }
          }
        }
        xhr.open('post', '/ajaxdelete', true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.send("id=" + id + "&img=" + img + "&flag=ajax")

      }, () => {
        layer.msg('否的')
      });
    }

    $("tbody").on('click', ".showContent", function () {
      let data = JSON.parse($(this).attr('data-item'))
      let {
        title,
        content,
        author
      } = data;
      let htmlStr = `
        <div style="padding:10px;">
          <h2 style='text-align:center'>${title}</h2>
          <h2 style='text-align:center'>作者： ${author}</h2> 
          <p>${content}</p>
        </div>`;
      layer.open({
        type: 1,
        shadeClose: true,
        area: ['820px', '540px'],
        content: htmlStr
      });
    })
    //搜索
    $("#search").on('click',function(){
      title = $('#title').val();
      status = $('#status').val();
      //发送搜索
      isSearch = true;//点击了
      getArticleData(curr,limit,function(res){
        let {count,data} = res;
        renderPage(laypage,'page',count,limit)
        isSearch = false;
        let tbody = renderTable(data)
        $('tbody').html(tbody)
      },{title,status})

    })
  </script>
</body>

</html>